<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Girls' Frontline logistics calculator">
  <meta name="author" content="ChantXu">
  <meta name="keywords" content="少女前线, 后勤, 计算, Girls' Frontline, Logistics Support, Calculator">
  <title>Girls' Frontline Logistics Combination Calculator</title>

  <!-- vendor css bootstrap !python-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
    integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous">
  <!-- end venfor css bootstrap !python -->

  <!-- GF css !python -->
  <!-- 如果修改这些内容还需要修改下面script中重新加载的css文件名 -->
  <link href="../lang/languages.css" rel="stylesheet">
  <link href="../css/slider.css" rel="stylesheet">
  <link href="../css/button.css" rel="stylesheet">
  <link href="../css/group.css" rel="stylesheet">
  <link href="../css/main.css" rel="stylesheet">
  <link href="../css/plan_combination.css" rel="stylesheet">
  <!-- end GF css !python -->

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"
    integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
  <script>
    //backup vendor_js JQ !python
    window.jQuery || document.write('<script src="../vendor/jquery/jquery-3.4.1.slim.min.js"><\/script>');
    //end backup vendor_js JQ !python
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha256-OUFW7hFO0/r5aEGTQOz9F/aXQOt+TwqI1Z4fbVvww04=" crossorigin="anonymous"></script>
  <script>
    //backup vendor bootstrap !python
    //如果修改了引入的bootstrap的js或css文件, 还需要修改.release.py中compressHTML()的内容
    //由于自己的css覆盖了bootstrap的css, 所以在重新加载bootstrap后还需再重新加载自己的css
    window.bootstrap || document.write('<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="../lang/languages.css" rel="stylesheet"><link href="../css/slider.css" rel="stylesheet"><link href="../css/button.css" rel="stylesheet"><link href="../css/group.css" rel="stylesheet"><link href="../css/main.css" rel="stylesheet"><link href="../css/plan_combination.css" rel="stylesheet"><script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"><\/script>');
    //end backup vendor bootstrap !python
  </script>
</head>

<body class="container-fluid" id="container-fluid">
  <style id="Notransition">
    .btn {
      transition: none;
    }
  </style>
  <!-- Modal -->
  <div class="modal fade" id="Modal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title disable-selected-text" id="Modal_title"></h5>
          <button type="button" id="Modal_closeButton" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" id="Modal_body"></div>
        <div class="modal-footer" id="Modal_footer">
          <button type="button" class="btn btn-primary" id="Modal_footer_button_ok" data-dismiss="modal" style="width: 5rem;"></button>
          <button type="button" class="btn btn-outline-dark" id="Modal_footer_button_cancel" data-dismiss="modal" style="width: 5rem;"></button>
        </div>
      </div>
    </div>
  </div>
  <!-- head -->
  <div class="spinner-grow text-success align-middle" role="status" style="height: 0.5rem; width: 0.5rem; position: fixed; z-index: 300; right: 0;">
    <span class="sr-only">Loading...</span>
  </div>
  <h2 id="page-header" class="col-lg-7 float-left disable-selected-text header">
    <span id="header"></span>
    <div class="btn-group">
      <button type="button" id="set_lang" disabled class="btn btn-outline-dark dropdown-toggle btn-regular" data-boundary="window"
        data-toggle="dropdown">Language</button>
      <ul class="dropdown-menu" style="min-width: 8rem">
        <a class="dropdown-item" id="lang-zh-CN">简体中文</a>
        <a class="dropdown-item" id="lang-zh-TW">繁體中文</a>
        <a class="dropdown-item" id="lang-en">English</a>
      </ul>
    </div><!-- 必须在这两个标签间加空 !python space-->
    <button type="button" class="btn btn-outline-dark btn-regular" id="help">?</button><!-- 必须在这两个标签间加空 !python space-->
    <div class="spinner-border align-middle" id="page_loading" role="status" style="border-width: 0.2rem; height: 1.5rem; width: 1.5rem;">
      <span class="sr-only">Loading...</span>
    </div>
    <div class="custom-control custom-switch float-right">
      <input type="checkbox" class="custom-control-input" style="cursor: pointer;" id="PlanCombinationSwitch" autocomplete="off" disabled>
      <label class="custom-control-label" style="font-size: 16px; cursor: pointer;" for="PlanCombinationSwitch" id="PlanCombinationSwitch_label"></label>
    </div>
    <hr style="margin: 0.5rem 0 1rem 0; width: 100%;" />
  </h2>
  <!-- config -->
  <div class="col-lg-5 float-right input-group input-group-regular mb-3 config_card"
    style="max-width: 440px;">
    <label for="Config_importInput" class="input-group-label input-group-text disable-selected-text" id="Config_text"></label>
    <input type="text" class="form-control" style="min-width: 40px;" id="Config_importInput" onclick="this.select();"
      autocomplete="off" disabled>
    <button type="button" class="btn btn-outline-dark input-group-btn" id="Config_importButton" disabled>
      <span class="glyphicon glyphicon-import"></span></button>
    <div id="Config_export_group">
      <button type="button" class="btn btn-outline-dark dropdown-toggle" data-toggle="dropdown" id="Config_export" disabled
        style="border-top-left-radius: 0; border-bottom-left-radius: 0; display: inline-block; font-size: 0.875rem; margin-left: -1px;"><span
          class="glyphicon glyphicon-export"></span></button>
      <div class="dropdown-menu dropdown-menu-input dropdown-menu-right" style="width: 280px;">
        <input id="Config_exportInput" class="form-control form-control-sm" type="text" readonly
          onclick="this.select();">
      </div>
    </div>
  </div>
  <!-- alert -->
  <div class="col-lg-7 float-left disable-selected-text alert_card">
    <div class="alert alert-warning alert-dismissible fade show" id="description" role="alert">
      <span id="description_text" style="color:#000000"></span>
      <button type="button" id="neverShowAgain_description" disabled class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="alert alert-danger" id="localstorageDoesNotWork" role="alert" style="color: #000000;"></div>
    <div class="alert alert-warning alert-dismissible fade show" id="localstorageWarning" role="alert">
      <span id="localstorageWarning_text" style="color:#000000"></span>
      <button type="button" id="neverShowAgain_localstorageWarning" disabled class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
  <!-- plan Combination -->
  <div id="plan_combination_card" class="col-lg-12 float-left plan_combination_card disable-selected-text d-none">
    <div class="card border-dark mb-3">
      <div id="Plan_Combination_title" class="card-header pt-2 pb-2"></div>
      <div class="card-body">
        <div class="form-row" style="max-width: 800px;">
          <div class="col-md-4 mb-2 input-group input-group-regular">
            <label for="PlanCombination_startDate" class="input-group-label input-group-text"
              id="PlanCombination_startDate_label"></label>
            <input id="PlanCombination_startDate" type="date" class="form-control input-group" style="width: auto; max-width: 150px;">
          </div>
          <div class="col-md-4 mb-2 input-group input-group-regular">
            <label for="PlanCombination_endDate" class="input-group-label input-group-text"
              id="PlanCombination_endDate_label"></label>
            <input id="PlanCombination_endDate" type="date" class="form-control" style="width: auto; max-width: 150px;">
          </div>
        </div>
        <div class="form-group input-group-regular mb-4">
          <input type="number" min="1" max="999" style="max-width: 300px;" class="form-control" id="CommanderLevel" onfocus="this.select();" autocomplete="off">
          <small id="CommanderLevel_text" class="form-text text-muted"></small>
        </div>
        <div id="PlanCombination_current_box" class="box-wrap">
          <span class="box-title" id="PC_current_title"></span>
          <div id="PlanCombination_current_re" class="form-row" style="max-width: 980px;"></div>
          <div id="PlanCombination_current_co" class="form-row" style="max-width: 980px;"></div>
        </div>
        <button type="button" class="btn btn-danger mb-2" id="PC_deleteAllPlans"></button><!-- 必须在这两个标签间加空 !python space-->
        <button type="button" class="btn btn-info mb-2" id="PC_saveAll"></button><!-- 必须在这两个标签间加空 !python space-->
        <button type="button" class="btn btn-danger mb-2" id="PC_deletePlan" disabled></button>
        <div id="PlanCombination_chart" style="height: 300px; width: auto; margin: 0 -10px 1rem -10px"></div>
        <div class="card">
          <div class="card-header pt-2 pb-2 border-bottom-0">
            <button class="btn btn-link p-0 collapsed" type="button" data-toggle="collapse"
                    data-target="#PC_Ranking_card" aria-expanded="false" aria-controls="PC_Ranking_card"
                    id="PC_Ranking_card_title"></button>
          </div>
          <div id="PC_Ranking_card" class="collapse">
            <div class="card-body p-2" id="PlanCombination_demand_card">
              <div class="card mb-2">
                <div class="card-header pt-2 pb-2 border-bottom-0">
                  <button class="btn btn-link p-0 collapsed" type="button" data-toggle="collapse"
                          data-target="#calcTargetValueTool_card" aria-expanded="false" aria-controls="calcTargetValueTool_card"
                          id="calcTargetValueTool_title"></button>
                </div>
                <div id="calcTargetValueTool_card" class="collapse">
                  <div class="card-body p-2">
                    <div id="PC_calcDemand_description" class="mb-2"></div>
                    <h5 id="PC_targetValue_h5"></h5>
                    <div id="PlanCombination_target_re" class="form-row" style="max-width: 980px;"></div>
                    <div id="PlanCombination_target_co" class="form-row" style="max-width: 980px;"></div>
                    <button type="button" class="btn btn-primary" id="PC_calcDemand"></button>
                  </div>
                </div>
              </div>
              <h5 id="PC_demandValue_h5"></h5>
              <div id="PC_demand_description" class="mb-2"></div>
              <div id="PlanCombination_demand_re" class="form-row" style="max-width: 980px;"></div>
              <div id="PlanCombination_demand_co" class="form-row" style="max-width: 980px;"></div>
              <div class="col-lg-12 btn-toolbar p-0 mt-2">
                <button type="button" class="btn btn-primary" id="PC_startRanking"></button>
                <div class="spinner-border text-primary ml-2 d-none" role="status" style="border-width: 0.3rem;" id="PC_ranking_loading">
                  <span class="sr-only">Loading...</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
  <!-- setting -->
  <div class="col-lg-7 float-left setting_card">
    <div class="card border-dark mb-3">
      <div class="card-header pt-2 pb-2">
        <span id="setting" class="disable-selected-text" style="padding-top: 2px; padding-bottom: 2px;"></span>
        <div class="switch float-right">
          <input type="radio" class="switch-input" name="Display_PerHourOrTotal" id="Display_PerHour">
          <label tabindex="0" for="Display_PerHour" class="disable-selected-text switch-label switch-label-off"
            id="Display_PerHour_text" style="cursor: pointer;"></label>
          <input type="radio" class="switch-input" name="Display_PerHourOrTotal" id="Display_Total" checked>
          <label tabindex="0" for="Display_Total" class="disable-selected-text switch-label switch-label-on"
            id="Display_Total_text" style="cursor: pointer;"></label>
          <span class="switch-selection"></span>
        </div>
      </div>
      <div class="card-body row" style="margin: 0;">
        <!-- setting Logistics -->
        <div class="col-lg-7 p-0" id="plan_setting">
          <h5 id="Logistics_setting_title" class="d-none"></h5>
          <ul class="nav nav-tabs nav-justified">
            <li class="nav-item text-nowrap">
              <a class="nav-link active" href="#" id="Tab_Anytime_name"></a>
            </li>
            <li class="nav-item text-nowrap">
              <a class="nav-link" href="#" id="Tab_Timetable_name"></a>
            </li>
          </ul>
          <div class="tab-content disable-selected-text">
            <div class="tab-pane fade active show" id="Tab_Anytime">
              <h6 id="tab_Anytime_time" class="mt-2"></h6>
              <div class="input-group input-group-regular mb-2">
                <input type="number" min="0" max="72" class="form-control" id="Time_Anytime_hours" value=16
                  onfocus="this.select();" autocomplete="off" disabled>
                <label for="Time_Anytime_hours" class="input-group-label input-group-text"
                  id="tab_Anytime_hour"></label>
                <input type="number" min="0" max="60" class="form-control" id="Time_Anytime_minutes" value=0
                  onfocus="this.select();" autocomplete="off" disabled>
                <label for="Time_Anytime_minutes" class="input-group-label input-group-text"
                  id="tab_Anytime_minute"></label>
              </div>
              <h6 id="tab_Anytime_MinimumIntervalTime"></h6>
              <div class="input-group input-group-regular mb-2">
                <input type="number" min="0" max="60" class="form-control" id="Tab_Anytime_MinimumIntervalTime_minutes"
                  value=0 onfocus="this.select();" autocomplete="off" disabled>
                <label for="Tab_Anytime_MinimumIntervalTime_minutes"
                  class="input-group-label input-group-text"
                  id="tab_Anytime_MinimumIntervalTime_minute"></label>
              </div>
            </div>
            <div class="tab-pane fade" id="Tab_Timetable">
              <h6 id="tab_Timetable_time" class="mt-2"></h6>
              <div class="input-group input-group-regular mb-1" style="width: 100%;">
                <input type="number" min="0" max="72" class="form-control" id="Time_Timetable_hours" value=5
                  onfocus="this.select();" autocomplete="off" disabled>
                <label for="Time_Timetable_hours" class="input-group-label input-group-text"
                  id="tab_Timetable_hour"></label>
                <input type="number" min="0" max="60" class="form-control" id="Time_Timetable_minutes" value=0
                  onfocus="this.select();" autocomplete="off" disabled>
                <label for="Time_Timetable_minutes" class="input-group-label input-group-text"
                  id="tab_Timetable_minute"></label>
              </div>
              <button type="button" class="btn btn-danger btn-sm float-right" id="tab_Timetable_deleteall">
                <span class="glyphicon glyphicon-remove-sign" style="font-size: 17px; top: 3px;"></span></button>
              <div slider style="margin: 37px 0 5px 0;">
                <div id="Tab_Timetable_range" style="right: 49px;">
                  <div inverse-left style="width:70%;"></div>
                  <div inverse-right style="width:70%;"></div>
                  <div range style="left:0%;right:0%; background-color: #dee2e6;"></div>
                  <span thumb id="Tab_Timetable_range_thumb"
                    style="left:100%; background-color:rgb(221, 155, 155); cursor:default; z-index:0;"></span>
                  <div id="Tab_Timetable_range_tooltip" class="tooltip right custom-tooltip"
                    style="right: -69px; top:-9px;">
                    <div class="tooltip-arrow" style="top: 7px;"></div>
                    <div id="Tab_Timetable_range_tooltip_0_value" class="tooltip-inner">
                      5:00</div>
                  </div>
                </div>
              </div>
              <label id="tab_Timetable_addtimeh5" for="Tab_Timetable_AddNew" class="disable-selected-text"></label>
              <div class="input-group input-group-regular mb-2 disable-selected-text" id="Tab_Timetable_AddNew">
                <input type="number" min="0" max="72" class="form-control" id="Tab_Timetable_new_hours"
                  onfocus="this.select();" autocomplete="off">
                <label for="Tab_Timetable_new_hours" class="input-group-label input-group-text"
                  id="tab_Timetable_new_hour"></label>
                <input type="number" min="0" max="60" class="form-control" id="Tab_Timetable_new_minutes"
                  onfocus="this.select();" autocomplete="off">
                <label for="Tab_Timetable_new_minutes" class="input-group-label input-group-text"
                  id="tab_Timetable_new_minute"></label>
                <button type="button" class="btn btn-info input-group-btn" id="Tab_Timetable_AddNewTimePoint">
                  <span class="glyphicon glyphicon-plus" style="left: 1px;"></span>
                </button>
              </div>
            </div>
          </div>
          <h6 id="h4GreatSuccessRate" class="disable-selected-text"></h6>
          <div class="input-group input-group-regular disable-selected-text mb-2">
            <input type="number" min="15" max="69" class="form-control" id="GreatSuccessRate" value=60
              onfocus="this.select();" autocomplete="off" disabled>
            <label for="GreatSuccessRate" class="input-group-label input-group-text" id="Display_UPRate"></label>
            <label for="GreatSuccessRate" class="input-group-label input-group-text">%</label>
            <div class="input-group-append btn-group-toggle ml-0" data-toggle="buttons">
              <label id="GreatSuccessRateUp_btn" class="btn btn-checkbox disabled"
                style="padding: 0.3rem 0.7rem; font-size: 0.875rem;">
                <input type="checkbox" id="GreatSuccessRateUp">UP
              </label>
            </div>
          </div>
          <div class="input-group input-group-regular mb-2 disable-selected-text">
            <label class="input-group-text input-group-label" id="h4ChapterLimit" for="ChapterLimit"></label>
            <select class="custom-select" id="ChapterLimit" autocomplete="off"></select>
          </div>
        </div>
        <!-- setting consumption -->
        <div class="col-lg-7 p-0 d-none disable-selected-text" id="ConsumptionPlan_setting">
          <h5 id="Consumption_setting_title"></h5>
          <div class="form-row">
            <div class="col-sm-8 input-group-regular mb-2">
              <select class="custom-select" id="Consumption_select" autocomplete="off"></select>
            </div>
            <div class="col-sm-4 mb-2">
              <button type="button" class="btn btn-outline-dark btn-regular" id="Consumption_reset"></button>
            </div>
          </div>
          <div class="form-row" id="Consumption_re"></div>
          <div class="form-row" id="Consumption_co"></div>
          <div class="form-row">
            <div class="col-sm-8 input-group input-group-regular mb-2">
              <label class="input-group-text input-group-label" id="Consumption_times_label" for="Consumption_times"></label>
              <input type="number" class="form-control" value="1" id="Consumption_times" autocomplete="off">
            </div>
            <div class="col-sm-4 mb-2">
              <button type="button" class="btn btn-outline-dark btn-regular" id="Consumption_add"></button>
            </div>
          </div>
          <div class="table-responsive consumption-table">
            <table class="table text-nowrap">
              <thead>
                <tr>
                  <th class="Manp"></th>
                  <th class="Ammu"></th>
                  <th class="Rati"></th>
                  <th class="Part"></th>
                  <th class="TPro"></th>
                  <th class="Equi"></th>
                  <th class="QPro"></th>
                  <th class="QRes"></th>
                  <th id="consumption_times_th"></th>
                </tr>
              </thead>
              <tbody id="Consumption_tbody">
              </tbody>
              <tbody id="Consumption_total">
              </tbody>
            </table>
          </div>
        </div>
        <!-- setting demand -->
        <div class="col-lg-5 disable-selected-text Demand p-0" id="target">
          <h5 id="Demand"></h5>
          <div id="setTargetButton"></div>
          <label id="ContractWeight_label" class="btn-toolbar justify-content-between mb-0" for="customRange1">
            <span id="ContractWeight_notImportant"></span>
            <span id="ContractWeight_Important"></span>
          </label>
          <input type="range" class="custom-range" id="ContractWeight" min="0" max="100" step="2" disabled>
          <div id="setTargetInput"></div>
        </div>
        <!-- setting time period -->
        <div class="col-lg-5 disable-selected-text PC-addTimePeriod p-0 d-none" id="PlanCombination_addTimePeriod">
          <div class="custom-control custom-switch mb-2">
            <input type="checkbox" style="cursor: pointer;" class="custom-control-input" id="LogisticsConsumptionPlanSwitch" autocomplete="off">
            <label class="custom-control-label" style="cursor: pointer;" for="LogisticsConsumptionPlanSwitch"
              id="LogisticsConsumptionPlanSwitch_label"></label>
          </div>
          <h5 id="DateTimePeriod"></h5>
          <ul id="PC_DateTimePeriod_body" class="list-group list-group-regular mb-2" style="max-height: 300px;
            overflow-y: auto;"></ul>
          <div class="mb-2 input-group input-group-regular">
            <label for="PlanCombination_planStartDate" class="input-group-label input-group-text"
                                                   id="PlanCombination_planStartDate_label"></label>
            <input id="PlanCombination_planStartDate" type="date" class="form-control input-group" style="width: auto; max-width: 150px;">
          </div>
          <div class="mb-2 input-group input-group-regular">
            <label for="PlanCombination_planEndDate" class="input-group-label input-group-text"
                                                 id="PlanCombination_planEndDate_label"></label>
            <input id="PlanCombination_planEndDate" type="date" class="form-control" style="width: auto; max-width: 150px;">
          </div>
          <button type="button" class="btn btn-primary btn-regular mb-2" id="addNewTimePeriod"></button><!-- 必须在这两个标签间加空 !python space-->
          <button type="button" class="btn btn-danger btn-regular mb-2" id="deleteAllTimePeriod"></button>
        </div>
        <!-- setting button bar -->
        <div id="ranking_toolbar" class="col-lg-12 btn-toolbar p-0 mt-2">
          <button type="button" class="btn btn-primary" id="start_ranking" disabled></button>
          <button type="button" class="btn btn-danger" style="display: none;" id="clear_ranking"></button>
          <button type="button" class="btn btn-info d-none" id="PC_addLogisticsPlan"></button>
          <button type="button" class="btn btn-info d-none" id="PC_addConsumptionPlan"></button>
          <div class="spinner-border text-primary ml-2" role="status" style="border-width: 0.3rem; display: none;" id="ranking_loading">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-5 float-right SavedAndMissionTableAndPlanDetailsCard">
    <div class="accordion disable-selected-text" id="SavedAndMissionTableGroupCard">
      <!-- Saved -->
      <div class="card border-dark">
        <div class="card-header pt-2 pb-2" id="Saved_header">
          <button class="btn btn-link p-0 collapsed" id="Saved_Title" type="button" data-toggle="collapse"
            data-target="#Saved_card" aria-expanded="false" aria-controls="Saved_card">
          </button>
        </div>
        <div id="Saved_card" class="collapse" aria-labelledby="Saved_header"
          data-parent="#SavedAndMissionTableGroupCard">
          <div class="btn-toolbar pl-3 pt-1 pr-3" role="toolbar">
            <div class="input-group input-group-regular mr-2 mb-1">
              <input type="text" class="form-control" style="min-width: 200px;" id="importSaved_input" disabled
                onclick="this.select();" autocomplete="off">
              <button type="button" class="input-group-btn btn btn-outline-dark" id="importSaved_importButton" disabled>
                <span class="glyphicon glyphicon-import"></span></button>
              <div id="exportSaved_group">
                <button type="button" class="btn btn-outline-dark dropdown-toggle" data-toggle="dropdown" data-offset="0,0" data-boundary="viewport"
                  id="exportSaved_button"
                  style="border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 0.875rem; margin-left: -1px;"
                  disabled><span class="glyphicon glyphicon-export"></span></button>
                <div class="dropdown-menu dropdown-menu-input" style="width: 280px;">
                  <input id="exportSaved_input" class="form-control form-control-sm" type="text" readonly
                    onfocus="this.select();">
                </div>
              </div>
            </div>
            <div id="renameSaved_group" class="mr-2 mb-1">
              <button type="button" class="btn btn-outline-dark dropdown-toggle" data-toggle="dropdown" data-boundary="window"
                id="renameSaved_button" style="font-size: 0.875rem;" disabled><span
                  class="glyphicon glyphicon-pencil"></span></button>
              <div class="dropdown-menu dropdown-menu-input dropdown-menu-right" style="width: 280px;">
                <div class="input-group">
                  <input id="renameSaved_input" class="form-control form-control-sm" type="text"
                    onfocus="this.select();" required>
                  <button id="renameSaved_applyButton" class="btn input-group-btn btn-success d-flex"><span
                      class="glyphicon glyphicon-ok"></span></button>
                </div>
              </div>
            </div>
            <div class="btn-group mr-2 mb-1 btn-group-regular" role="group">
              <button id="moveSaved_up" type="button" class="btn btn-outline-dark" disabled><span
                  class="glyphicon glyphicon-arrow-up" /></button>
              <button id="moveSaved_down" type="button" class="btn btn-outline-dark" disabled><span
                  class="glyphicon glyphicon-arrow-down" /></button>
            </div>
            <div class="btn-group mb-1 btn-group-regular" role="group">
              <button id="deleteSaved" type="button" class="btn btn-danger" disabled><span
                  class="glyphicon glyphicon-trash" /></button></button>
            </div>
          </div>
          <div id="NoSaved" style="text-align: center;"></div>
          <ul id="Saved_Body" class="list-group list-group-regular Saved-List" style="max-height: 287px; overflow-y: auto;"></ul>
        </div>
      </div>
      <!-- missions -->
      <div class="card border-dark mb-3">
        <div class="card-header pt-2 pb-2" id="MissionTable_header">
          <button class="btn btn-link p-0" id="MissionTable_Title" type="button" data-toggle="collapse"
            data-target="#MissionTable_card" aria-expanded="true" aria-controls="MissionTable_card">
          </button>
        </div>
        <div id="MissionTable_card" class="collapse show" aria-labelledby="MissionTable_header"
          data-parent="#SavedAndMissionTableGroupCard">
          <div class="table-responsive mission-table">
            <table class="table text-nowrap mb-0">
              <thead class="disable-selected-text">
                <tr>
                  <th id="MissionTable_head_Mission" tabindex="0"></th>
                  <th id="MissionTable_head_Manp" class="Manp" tabindex="0"></th>
                  <th id="MissionTable_head_Ammu" class="Ammu" tabindex="0"></th>
                  <th id="MissionTable_head_Rati" class="Rati" tabindex="0"></th>
                  <th id="MissionTable_head_Part" class="Part" tabindex="0"></th>
                  <th id="MissionTable_head_TPro" class="TPro" tabindex="0"></th>
                  <th id="MissionTable_head_Equi" class="Equi" tabindex="0"></th>
                  <th id="MissionTable_head_QPro" class="QPro" tabindex="0"></th>
                  <th id="MissionTable_head_QRes" class="QRes" tabindex="0"></th>
                  <th id="MissionTable_head_Time" tabindex="0"></th>
                </tr>
              </thead>
              <tbody id="MissionTable_tbody"></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- plan details -->
    <div class="card border-dark mb-3" style="max-width: 663px;">
      <div class="card-header disable-selected-text pt-2 pb-2 border-bottom-0" id="PlanDetailsTitle"></div>
      <div class="table-responsive plan-details-table"
        style="border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;">
        <table class="table text-nowrap mb-0">
          <tbody id="PlanDetails">
            <tr>
              <td style="width: 198px;" colspan=3 id="PlanDetails_ShownTab">
              </td>
              <td style="width: 132px;" colspan=2 id="PlanDetails_TotalTime">
              </td>
              <td style="width: 198px;" colspan=3 id="PlanDetails_GreatSuccessRate"></td>
              <td style="width: 132px;" colspan=2 id="PlanDetails_ExecutionTimes"></td>
            </tr>
            <tr>
              <td id="PlanDetails_Mission"></td>
              <td id="PlanDetails_Manp" class="Manp"></td>
              <td id="PlanDetails_Ammu" class="Ammu"></td>
              <td id="PlanDetails_Rati" class="Rati"></td>
              <td id="PlanDetails_Part" class="Part"></td>
              <td id="PlanDetails_TPro" class="TPro"></td>
              <td id="PlanDetails_Equi" class="Equi"></td>
              <td id="PlanDetails_QPro" class="QPro"></td>
              <td id="PlanDetails_QRes" class="QRes"></td>
              <td id="PlanDetails_Time"></td>
            </tr>
            <tr id="PlanDetails_Mission_1" style="background-color: #C5D8FF;"></tr>
            <tr id="PlanDetails_Mission_2" style="background-color: #FFBFBE;"></tr>
            <tr id="PlanDetails_Mission_3" style="background-color: #B6F4B5;"></tr>
            <tr id="PlanDetails_Mission_4" style="background-color: #FFEBC7;"></tr>
            <tr id="PlanDetails_PerHour"></tr>
            <tr id="PlanDetails_Total"></tr>
            <tr id="PlanDetails_Chart_row">
              <td colspan=10 id="PlanDetails_Chart" class="pb-1"></td>
            </tr>
          </tbody>
          <tbody class="border-top-0">
            <tr>
              <td colspan=10 class="p-0 border-0">
                <div class="input-group">
                  <button class="btn btn-outline-dark" type="button" id="savePlan"
                    style="line-height: 30px; width: 99px; height: 30px; padding:0 6px; font-size:13px; border-width: 1px 0 0 0; border-radius: 0; border-bottom-left-radius: 0.25em;"></button>
                  <button class="btn btn-outline-dark" type="button" id="Capture" disabled
                    style="line-height: 30px; width: 99px; height: 30px; padding:0 6px; font-size:13px; border-bottom-width: 0; border-radius: 0; z-index: 10;"></button>
                  <label for="PlanDetails_InputStartTime" id="PlanDetails_InputStartTime_label"
                    style="font-size: 13px; border-radius: 0;border-width: 1px 0 0 0; padding: 5px 12px; border-top-color: #000000;"
                    class="input-group-span input-group-text disable-selected-text"></label>
                  <input type="time" step="60" id="PlanDetails_InputStartTime" class="form-control" value="00:00"
                    onfocus="this.select();"
                    style="height: 30px;padding:0 6px; border-radius: 0;border-bottom-width: 0; line-height: 28px; border-top-color: #000000; border-right-color: #000000;"
                    autocomplete="off" disabled>
                  <label for="PlanDetails_InputExecutionTimes" id="PlanDetails_InputExecutionTimes_label"
                    style="font-size: 13px; border-radius: 0; border-left-width: 0;border-bottom-width: 0; padding: 5px 12px; border-top-color: #000000;"
                    class="input-group-span input-group-text disable-selected-text"></label>
                  <input type="number" min="1" max="999" step="1" id="PlanDetails_InputExecutionTimes"
                    class="form-control" onfocus="this.select();" value="1"
                    style="height: 30px;padding:3px 6px; border-radius: 0;border-left-width: 0; border-right-width: 0;border-bottom-width: 0; border-top-color: #000000; border-bottom-right-radius: 0.25em;"
                    autocomplete="off" disabled>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!-- result -->
  <div class="col-lg-7 col-md-12 col-sm-12 col-xs-12 float-left result_card" id="result_card">
    <div class="card border-dark mb-3 disable-selected-text">
      <div class="card-header disable-selected-text pt-2 pb-2" id="result"></div>
      <div class="card-body">
        <div id="start_ranking_html" style="font-size: 0.875rem;"></div>
        <div id="FineTuning"></div>
        <div id="Plan_Table"></div>
      </div>
    </div>
  </div>
  <!-- footer -->
  <div class="col-lg-12 row disable-selected-text m-0 footer_card">
    <hr style="margin: 0; width: 100%;" />
    <footer class="col-lg-4 p-0">
      GitHub: <a href="https://github.com/CHANTXU64/Girls-Frontline"
        target="_blank">https://github.com/CHANTXU64/Girls-Frontline</a>
    </footer>
    <footer class="col-lg-3 p-0">
      <span id="permanentAddress"></span><a href="https://chantxu64.github.io/gf"
        target="_blank">https://chantxu64.github.io/gf</a>
    </footer>
    <footer class="col p-0">
      <a href="https://github.com/CHANTXU64/Girls-Frontline/wiki" target="_blank">wiki</a>
    </footer>
    <footer class="col p-0">
      <a id="OfflineVersion" href="https://chantxu64.github.io/GF_logistics_offline.zip"
        download="GF_logistics_offline.zip" target="_blank;"></a>
    </footer>
    <footer class="col p-0" id="version"></footer>
  </div>

  <script>
    //当用js切换nav显示时, 4.4.1bootstrap会在全部东西处理完后开始切换动画, 避免阻塞, 事先切换nav
    var HTMLSCRIPT_ShownTab = "Anytime";
    try {
      let storage = localStorage.getItem("GF_Logistics_v1.x.x");
      if (storage === null)
        storage = localStorage.getItem("GF_Logistics");
      if (storage === null)
        storage = localStorage.getItem("GF_Logistics_vDevelop.x.x");
      HTMLSCRIPT_ShownTab = JSON.parse(storage).TabName;
    } catch (ex) { }
    switch (HTMLSCRIPT_ShownTab) {
      case "Anytime":
        break;
      case "Timetable":
        $("#Tab_Anytime_name").removeClass("active");
        $("#Tab_Anytime").removeClass("active show");
        $("#Tab_Timetable_name").addClass("active");
        $("#Tab_Timetable").addClass("active show");
        break;
    }
  </script>

  <!-- GF js_1 !python -->
  <script src="../js/debug.js" crossorigin></script>
  <script src="../lang/languages.js"></script>
  <script src="../js/quick_sort.js"></script>
  <script src="../js/function.js"></script>
  <script src="../js/data.js"></script>
  <script src="../js/modal.js"></script>
  <script src="../js/local_storage.js"></script>
  <script src="../js/timetable_slider.js"></script>
  <script src="../js/input.js"></script>
  <script src="../js/tab.js"></script>
  <script src="../js/load_html.js"></script>
  <script src="../js/plan_combination_load.js"></script>
  <script src="../js/plan_details.js"></script>
  <script src="../js/mission_table.js"></script>
  <script src="../js/result_and_details_event.js"></script>
  <script src="../js/html.js"></script>
  <script src="../js/saved.js"></script>
  <script src="../js/config.js"></script>
  <script src="../js/load_first.js"></script>
  <script src="../js/html_event.js"></script>
  <!-- end GF js_1 !python -->

  <!-- GF js_2 !python -->
  <script src="../js/results_plan.js"></script>
  <script src="../js/fine_tuning.js"></script>
  <script src="../js/plan.js"></script>
  <script src="../js/ranking_main.js"></script>
  <script src="../js/plan_combination_function.js"></script>
  <script src="../js/plan_combination_localstorage.js"></script>
  <script src="../js/plan_combination_input.js"></script>
  <script src="../js/plan_combination_time_period.js"></script>
  <script src="../js/plan_combination_consumption_plan.js"></script>
  <script src="../js/plan_combination_logistics_plan.js"></script>
  <script src="../js/plan_combination_chart_option.js"></script>
  <script src="../js/plan_combination_charts.js"></script>
  <script src="../js/plan_combination_ranking.js"></script>
  <script src="../js/plan_combination_html.js"></script>
  <script src="../js/plan_combination_html_event.js"></script>
  <script src="../js/load_last.js"></script>
  <script src="../js/load_second.js"></script>
  <!-- end GF js_2 !python -->
</body>

</html>
